<template>
  <view class="groundPage">
    <view class="fix_top_box">
      <view class="search_box" @tap="goLink('/pages/groundPage/searchPage')">
        <view class="left_search_box">
          <view class="search_icon">
            <image src="../../static/images/icon/icon_search.png" class="icon-32" mode=""></image>
          </view>
          <view class="search_input">请输入搜索内容</view>
        </view>
        <view class="search_btn"><button>搜索</button></view>
      </view>
    </view>
    <view class="carousel_box">
      <Carousel :val="bannerObj" @swiperClick="swiperClick"></Carousel>
    </view>
    <view class="sort_btn_box">
      <view :class="['sort_item',index==curSortIdx?'activeSort':'']" v-for="(item,index) in sortList" :key="index" @tap="changeSortType(index)">
        {{item.name}}
      </view>
    </view>
    <view class="ground_list_box">
      <GroundItem v-for="item in productList.lists" :itemData="item" :index="item.id"></GroundItem>
    </view>
  </view>
</template>

<script>
import Carousel from '../../components/carousel/Carousel.vue';
import Com from '../../mixin/index.js';
import GroundItem from '../../components/groundItem/groundItem.vue'
export default {
  components: {
    Carousel,
    GroundItem
  },
  mixins: [Com],
  data () {
    return {
      bannerObj: {
        list: [],
        height: '270rpx',
        radius: '10rpx'
      },
      curSortIdx: 0,
      sortList: [{
        name: '综合排序',
        value: ''
      },
      {
        name: '销量优先',
        value: 'sale_num'
      },
      {
        name: '距离优先',
        value: 'sale_num'
      },
      {
        name: '人气优先',
        value: 'scan_num'
      },
      ],
      page: {
        page: 1,
        page_size: 10
      },
      productList: {
        lists: [],
        total: 1,
        total_page: 0
      },
    };
  },
  onLoad () {
    this.getBanner();
    this.getGroProductList();
  },
  onPullDownRefresh () {
    this.initGetList();
  },
  methods: {
    swiperClick (val) {
      let clickType = this.bannerObj.list[val];
      console.log(clickType, '点击你几个我爱唯欧你');
      switch (clickType.type) {
        case 'none':
          break;
        case 'team':
          this.goShopDetails(clickType.third_id);
          break;
        case 'farm':
          uni.navigateTo({
            url: `/pages/groundPage/details?id=${clickType.third_id}`
          });
          break;
      }
    },
    async getBanner () {
      const {
        data
      } = await this.$api.getBanner();
      this.bannerObj.list = data.banner;
      console.log(data, '获取信息');
    },
    //改变排序模块
    changeSortType (idx) {
      this.curSortIdx = idx;
      this.initGetList();
    },
    //初始化重新获取
    initGetList () {
      this.page = {
        page: 1,
        page_size: 10
      };
      this.productList = {
        lists: [],
        total: 1,
        total_page: 0
      };
      this.getGroProductList();
    },
    getGroProductList () {
      let params = {
        order_key: this.sortList[this.curSortIdx].value,
        ...this.page
      };
      this.getList('productList', 'getGroProductList', 'page', params).then(res => {
        uni.stopPullDownRefresh();
      });
    }
  }
}
</script>

<style lang="scss">
.groundPage {
  background-color: #f9f9f9;
  padding: 0rpx 24rpx 100rpx;

  .fix_top_box {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: #f9f9f9;
    padding-bottom: 6rpx;
  }

  .search_box {
    height: 68rpx;
    background: #ffffff;
    border-radius: 34rpx;
    border: 2rpx solid #fed100;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .left_search_box {
      padding-left: 18rpx;
      display: flex;
      align-items: center;

      .search_icon {
        margin-right: 4rpx;
      }

      .search_input {
        color: #a7a7a7;
        font-size: 26rpx;
      }
    }

    .search_btn {
      button {
        width: 120rpx;
        height: 68rpx;
        background: #fed100;
        font-size: 26rpx;
        border-radius: 34rpx;
      }
    }
  }

  .carousel_box {
    margin-bottom: 30rpx;
  }

  .sort_btn_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .sort_item {
      background: #ffffff;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #666666;
      padding: 14rpx 32rpx;
      width: 160rpx;
      box-sizing: border-box;
    }

    .activeSort {
      color: #ff5b25;
      background: #fff1ec;
      border: 2rpx solid #ff4b10;
    }
  }

  .ground_list_box {
  }
}
</style>